{% load get_range %}
<div class="batch ui-layout-north" id="batch" data-index="{{batch.pk}}">
    <div class="ui-widget-header ui-layout-header">
        Batch Viewer
    </div>    
    <div class="batch_info ui-medium-flat">
        <div class="batch_controls_left {{batch.task_type|cut:"."}}">
            <span class="batch_name">{{batch.name}}</span>
            <div class="clear"></div>
            <div class="batch_controls_inner">
                <a href="/batch/export_options/{{batch.pk}}/" class="export_link button_link toggle_button ui-state-default ui-corner-all" title="Export Batch Transcripts">Export</a>
            </div>
        </div>
        <div class="batch_controls_right">
            <div class="progressbar_container">
                <span class="progressbar success">
                    <span class="progress" style="width: {{batch.estimate_progress}}%; "
                        title="{{batch.estimate_progress}}%"></span>
                </span>
            </div>
            <a href="/batch/retry/{{batch.pk}}/" data-pk="{{batch.pk}}" class="ui-state-default ui-corner-all button_link ui-icon ui-icon-refresh retry_batch" title="Retry All Tasks">Retry All</a>
            <a href="/batch/retry_errored/{{batch.pk}}/" data-pk="{{batch.pk}}" class="ui-state-default ui-corner-all button_link ui-icon ui-icon-refresh retry_errored" title="Retry Errored
                Tasks">Retry Errored</a>
            <a href="/batch/abort/{{batch.pk}}/" data-pk="{{batch.pk}}" class="ui-state-default ui-corner-all
                button_link ui-icon ui-icon-circle-close abort_batch" title="Abort Entire Batch">Abort Batch</a>
            <a class="filter_container button_link toggle_button ui-state-default ui-corner-all" id="status_filter">Filter Tasks</a>
            <div class="list_popup" style="display: none; ">
                <div class="state_filter">
                    <input type="text" id="text_filter" />                        
                </div>
                <div class="state_filter">
                    <label class="state_label" for="ALL">ALL</label>
                    <input type="checkbox" name="ALL" class="filter_none" checked="checked">
                </div>
                <div class="state_filter">
                    <label class="state_label" for="INIT">INIT</label>
                    <input type="checkbox" name="status_INIT" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="PENDING">PENDING</label>
                    <input type="checkbox" name="status_PENDING" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="RETRY">RETRY</label>
                    <input type="checkbox" name="status_RETRY" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="STARTED">STARTED</label>
                    <input type="checkbox" name="status_STARTED" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="SUCCESS">SUCCESS</label>
                    <input type="checkbox" name="status_SUCCESS" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="FAILURE">FAILURE</label>
                    <input type="checkbox" name="status_FAILURE" class="filter_type" />
                </div>
                <div class="state_filter">
                    <label class="state_label" for="ABORTED">ABORTED</label>
                    <input type="checkbox" name="status_ABORTED" class="filter_type" />
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tl_container ui-layout-center ui-widget ui-tabs ui-corner-bottom">
    <div class="task_list ui-tabs-nav ui-helper-reset ui-helper-clearfix" style="margin-right: 0px; ">
        {% for i in batch.task_count|get_range %}
        <div class="batch_task empty ui-helper-clearfix" style="" data-index="{{i}}" href="#">
            <a class="page_name">Loading... {{i}}</a>               
            <div class="batch_controls_right">
                <div class="progressbar_container">
                    <span class="progressbar success">
                        <span class="progress" style="width: 0%; " title="0%"></span>
                    </span>
                </div>
                <a href="#" class="ui-state-default ui-corner-all button_link ui-icon ui-icon-circle-close abort_task" title="Abort Task"></a>
                <a href="#" class="ui-state-default ui-corner-all button_link ui-icon ui-icon-refresh retry_task" title="Retry Task"></a>
                <span class="page_info"></span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

